<script setup>
const props = defineProps({
	data: Array,
	label: String,
	openModal: Function,
	spec: String,
	zp: Boolean,
})
// const lpu_name = ref(props.label)
</script>
<template>
	<div v-auto-animate>
		<UDivider>
			<div class="text-2xl text-center font-bold py-8 font-['Open_Sans']">
				{{ props.label }}</div>
		</UDivider>
		<table id="lgottable">
			<thead>
				<tr>
					<th rowspan="6">Врач</th>
					<th colspan="4" rowspan="3">Лаборатория</th>
				</tr>
				<tr></tr>
				<tr></tr>
				<tr>
					<th rowspan="3" class="w-64">Льгота</th>
					<th rowspan="3" class="w-64">ВТ</th>
					<th rowspan="3" class="w-64">ПД</th>
					<th rowspan="3" class="w-64">Итого</th>
				</tr>
				<tr></tr>
				<tr></tr>
				<tr></tr>

			</thead>
			<tbody>
				<template v-for="item in props.data.sort((a, b) => (a.fio > b.fio) ? 1 : ((b.fio > a.fio) ? -1 : 0))">
					<tr class="text-center">
						<!-- <td @click="props.openModal(item.mpp, props.report.lpu.lpu)"><b>{{ item.name }}</b></td> -->
						<td @click="props.openModal(item.mpp, props.spec, item.lab_itog, 0, props.zp)"><b>{{ item.fio
								}}</b></td>
						<td class="text-right font-mono">{{ item.lab_lgot.toLocaleString() }}</td>
						<td class="text-right font-mono">{{ item.lab_vt.toLocaleString() }}</td>
						<td class="text-right font-mono">{{ item.lab_pd.toLocaleString() }}</td>
						<td class="text-right font-mono">{{ item.lab_itog.toLocaleString() }}</td>
					</tr>
				</template>
			</tbody>
			<tfoot>
				<tr class="font-bold text-right font-mono">
					<th>
						Итого
					</th>
					<td>
						{{ props.data.reduce((acc, val) => acc + val.lab_lgot, 0).toLocaleString() }}
					</td>
					<td>
						{{ props.data.reduce((acc, val) => acc + val.lab_vt, 0).toLocaleString() }}
					</td>
					<td>
						{{ props.data.reduce((acc, val) => acc + val.lab_pd, 0).toLocaleString() }}
					</td>
					<td>
						{{ props.data.reduce((acc, val) => acc + val.lab_itog, 0).toLocaleString() }}
					</td>
				</tr>
			</tfoot>
		</table>

	</div>
</template>

<style>
#lgottable {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
}

#lgottable td,
#lgottable th {
	border: 1px solid #ddd;
	padding: 8px;
}

#lgottable tr:nth-child(even) {
	background-color: #f2f2f2;
}

#lgottable tr:hover {
	background-color: #ddd;
}

#lgottable th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	background-color: #04AA6D;
	color: white;
}
</style>